<template>
    <div class="w-dvw h-dvh flex flex-col justify-center items-center">
        <ColorGridComponent 
            :size="gridSize" 
            :difficultyLevel="gameDifficultyLevel" 
            @select="handleSelect"
            ref="colorGridComponentDom"
        />
        <div class="h-[80px]">
            <p class="text-[22px] leading-[80px] text-[#999999]">
                {{ renderingText }}
            </p>
        </div>
    </div>
</template>
<script setup>
import ColorGridComponent from '@/components/ColorGridComponent.vue';
import router from '@/router';
import { onMounted, ref } from 'vue';

const colorGridComponentDom = ref(null)

const gridSize = ref(2)

const gameDifficultyLevel = ref(0)

const renderingText = ref('')

onMounted
(
    () =>
    {
        textGradually()
    }
)

const textGradually = () =>
{
    const text = '选择那个有微小差别的色块'
    const timer = setInterval
    (
        () =>
        {
            renderingText.value = text.slice(0, renderingText.value.length + 1)
            if (renderingText.value.length === text.length) clearInterval(timer)
        }, 150
    )
}

const handleSelect = (isSelect) =>
{
    if (!isSelect)
    {
        goScorePage(Math.floor((gameDifficultyLevel.value + 1) * 3.3))
        return
    }

    if (gridSize.value < 6)
    {
        gridSize.value++
    }

    if (gameDifficultyLevel.value === 29)
    {
        goScorePage(100)
    }
    else
    {
        gameDifficultyLevel.value++
    } 

    renderingColorGridComponent()

}

const goScorePage = (score) =>
{
    router.push
    (
        {
            path: '/score',
            query: { score }
        }
    )
}

const renderingColorGridComponent = () =>
{
    if (colorGridComponentDom.value)
    {
        colorGridComponentDom.value.refreshColor()
    }
}
</script>
<style scoped>
.fade-enter-active,
.fade-leave-active 
{
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to 
{
  opacity: 0;
}
</style>
